<!DOCTYPE html>
<html lang="en" id="top">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻页</title>
    <!-- 引入animate动画 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <!-- 引入外部css文件 -->
    <link rel="stylesheet" href="../css/news.css" type="text/css">
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入bookstrap -->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
    <link href="../css/head.css" rel="stylesheet" type="text/css" />
    <link href="../css/foot.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <!-- 头部文件 -->
    <div id="header">
        <header class="sticky">
            <div class="logo"><img src="../picture/logo2.png" />瞪羚科技</div>
            <nav>
                <a href="#">网站首页</a>
                <a href="#">产品服务</a>
                <a href="#">解决方案</a>
                <a href="#">瞪羚新闻</a>
                <a href="#">关于我们</a>
                <a href="#">加入我们</a>
            </nav>
            <div class="burger">
                <div class="burger-line1"></div>
                <div class="burger-line2"></div>
                <div class="burger-line3"></div>
            </div>
        </header>
        <!-- <iframe src="./news.html" frameborder="0" scrolling="no" style="width: 100%; height: 200vh;"></iframe> -->
    </div>
    <div class="news" ref="target" id="news">
        <div class="head">
            <span>新闻中心</span>
        </div>
        <div class="borde">
            <div class="body">
                <!-- @click="toDetails(li.id)" -->
                <div v-for="(li,index) in news" :key="index" :style="li.yes">
                    <div class="animate__animated animate__zoomIn">
                        <a href="" @click="getHref(li.id,index)" class="new" :id=index>
                            <div class="image"
                                :style="{backgroundImage: 'url(' + li.picture + ')',backgroundSize:backgroundSize[index]}">
                            </div>
                            <div class="msg">
                                <div class="title">{{li.title}}</div>
                                <div class="introduce">{{li.summary}}</div>
                                <div class="time">{{li.updateTime}}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot" id="poll" v-show="showButton==1">
            <button type="button" class="btn btn-primary" @click="change">更多新闻</button>
        </div>
        <div class="foot" id="poll" v-show="showButton==2">
            <img src="../picture/LoadingIndicator.png" alt="等待" />
        </div>
        <div class="foot" id="poll" v-show="showButton==3">
            <p class="p1">我也是有底线的</p>
        </div>
        <a href="#top" class="scrollToTop" v-show="showToTop">
            <svg t="1598927876838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1786" width="32" height="32">
                <path
                    d="M825.568 555.328l-287.392-289.28C531.808 259.648 523.488 256.576 515.2 256.64 514.08 256.544 513.12 256 512 256c-4.672 0-9.024 1.088-13.024 2.88-4.032 1.536-7.872 3.872-11.136 7.136l-259.328 258.88c-12.512 12.48-12.544 32.736-0.032 45.248 6.24 6.272 14.432 9.408 22.656 9.408 8.192 0 16.352-3.136 22.624-9.344L480 364.288 480 928c0 17.696 14.336 32 32 32s32-14.304 32-32L544 362.72l236.192 237.728c6.24 6.272 14.496 9.44 22.688 9.44s16.32-3.104 22.56-9.312C838.016 588.128 838.048 567.84 825.568 555.328z"
                    p-id="1787" fill="#ffffff"></path>
                <path
                    d="M864 192 160 192C142.336 192 128 177.664 128 160s14.336-32 32-32l704 0c17.696 0 32 14.336 32 32S881.696 192 864 192z"
                    p-id="1788" fill="#ffffff"></path>
            </svg>
        </a>
    </div>
    <div id="foot">
        <footer>
            <div class="footer-menus">
                <div class="contact-us">
                    <p class="menu-title">广西瞪羚科技有限公司</p>
                    <p>联系电话：0771-5615159</p>
                    <p>地址：南宁市青秀区佛子岭路33号网易联合创新中心28栋一楼</p>
                </div>
                <div class="icp-info">
                    <span>Copyright©2019广西瞪羚科技有限公司 All Right Reserved</span><span> 南宁网安备
                        33011002013032号</span><span>浙ICP备13032182号-1</span>
                </div>
        </footer>
    </div>
    <!-- 引入自己的js文件 -->
    <script type="text/javascript" src="../js/news.js"></script>
    <!-- <script src="../js/foot.js" type="text/javascript"></script> -->
</body>

</html>